<template>
  <div class="frame">
    <div class="flex">
      <div class="picchangebox">
        <Swiper />
      </div>
      <div class="mvhotlist">
        <h3 class="title">
          <span class="hotMv">MV热榜排行</span>
          <a href="#" style="text-decoration: none; color: #fff" class="moreMv">
            更多
          </a>
        </h3>
        <ul class="mvNotice">
          <li
            class="mvNoticeItem"
            v-for="(mv, index) in hotMv"
            :key="mv.id"
            @click="toPlayMv(mv.id, mv.name)"
          >
            <span class="mvTop">{{ index + 1 }}</span>
            <span class="mvName">{{ mv.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- MV分类 -->
    <MvType />
  </div>
</template>
<script>
import Swiper from "./swiper/swiper";
import MvType from "./MvType/MvType";
import { mapActions } from "vuex";
import getcatgory from "../../api/mvRequest/getcatgory";
export default {
  name: "Mv",
  methods: {
    // 开启命名空间
    ...mapActions("mvinfo", ["getList"]),
    async toPlayMv(id, name) {
      const {
        data: { url },
      } = await getcatgory("/mv/url", {
        params: {
          id,
        },
      });
      this.$router.push({
        name: "MvPlayer",
        query: {
          url,
          name,
        },
      });
    },
  },
  data() {
    return {
      hotMv: [],
      mvType: [],
    };
  },
  async mounted() {
    // 热mv排行
    this.getList();
    let { data } = await getcatgory("/top/mv", {
      params: {
        limit: "10",
      },
    });
    this.hotMv = data;
  },
  components: {
    Swiper,
    MvType,
  },
};
</script>

<style scoped>
/*整体布局 */
* {
  margin: 0;
  padding: 0;
}
.frame {
  padding: 0 87px;
  position: relative;
  left: 50%;
  width: 1000px;
  transform: translateX(-50%);
  margin-top: 25px;
}
.flex {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  margin-bottom: 25px;
}
.picchangebox {
  /* float: left; */
  width: 663px;
  height: 325px;
}
.mvhotlist {
  /* float: right; */
  width: 317px;
  height: 325px;
}
.mvhotlist {
  color: #fff;
}
/* 标题 */
.title {
  display: flex;
  height: 29px;
}
.hotMv {
  width: 234px;
  padding-left: 15px;
  margin-right: 2px;
  background: #deb200;
}
.moreMv {
  width: 85px;
  background: #363636;
}
/* 音乐排行榜 */
.mvNotice {
  list-style: none;
  margin-top: 2px;
  background: #363636;
}

.mvNoticeItem {
  display: flex;
  height: 29px;
  line-height: 29px;
}
.mvNoticeItem :hover {
  background: rgba(255, 255, 255, 0.5);
}
.mvNoticeItem .mvTop {
  text-align: center;
  width: 37px;
}
.mvNoticeItem .mvName {
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
